<template>
    <div class="login-modal">
     <!-- 灰色遮罩层,点击关闭 -->
      <div class="mask" @click="changeisshowlogin(false)"></div>
      <!-- 登录弹窗，遮罩和弹窗分开可以避免冒泡，如果一起则点击遮罩时，白色弹窗也会被点击 -->
      <div class="login-box">
        <!-- 关闭按钮 -->
        <img class="close" @click="changeisshowlogin(false)" src="@/assets/img/close.png" alt="">
        <!-- 登录弹窗文案 -->
        <ul class="title">
            <!-- :class="isShowForm==true?'active':''"三目表达式，可以直接判断是否显示点击样式 -->
          <li :class="isShowForm==true?  'active':''  "  @click="isShowForm=true">手机号码登录</li>
          <li style="margin:-2px 10px 0; cursor: auto;">|</li>
          <li :class="isShowForm==false?  'active':''  " @click="weixinClick">微信扫码登录</li>
          <!--微信 @click="weixinClick" -->
        </ul>
        <div class="body">
          <!-- 手机号登录区域，isShowForm为true时显示，为false不显示-->
          <div class="form" v-show="isShowForm">
            <div class="input-group">
              <!-- v-model实现数据双向绑定 -->
              <input type="text" placeholder="请输入手机号" v-model="phoneNumber">
            </div>
            <div class="input-group">
              <!-- <slide-verify :l="42" :r="20" :w="360" :h="140"
               @success="onSuccess" @fail="onFail" @refresh="onRefresh" 
               :style="{ width: '100%' }" class="slide-box" ref="slideBlock" :slider-text="msg">
              </slide-verify> -->
              <slide-verify :l="42" :r="20" :w="360" :h="140" :style="{ width: '100%' }" ref="block" :slider-text="msg" :accuracy="1"  @success="onSuccess"
              @fail="onFail" @refresh="onRefresh" class="slide-box"></slide-verify>
            </div>
            <div class="input-group">
              <input type="text" placeholder="请输入验证码" v-model=" YZMcode ">
              <div class="btn get-code">
                <span v-show="!isShowCount" @click="getYZMcode">获取验证码</span>
                <span v-show="isShowCount">{{count}}s</span>
              </div>
            </div>
            <div class="btn" @click="submitLogin">登录</div>
          </div>
          <!-- 微信二维码区域 -->
          <div class="qrcode" v-show="!isShowForm"  id="weixin">微信二维码获取失败,请刷新~</div>
        </div>
      </div>
    </div>
</template>
  
<script>
import {mapMutations,mapActions} from "vuex"
// 局部注册组件，需要单独引用组件样式
// 只提供局部引用的方式，不再采用插件形式，方便按需加载，减少主包大小
import SlideVerify from "vue3-slide-verify";
import "vue3-slide-verify/dist/style.css";
// 登录接口学习引用了b站前端乐哥的电商商城的登录接口
// 登录接口引入
import {SendYZMAPI,PhoneLoginAPI,BindPhoneAPI} from "@/request/api"
// import {validatePhoneNumber} from "@/utils"
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Login',
    data () {
      return {
        // 是否展示手机验证表单
        isShowForm:true,
        // 滑块验证码的提示文本
        msg: "向右滑动",
        // 用户输入的手机号，v-model数据双向绑定
        phoneNumber: "",
        // 用户输入的验证码，v-model数据双向绑定
        YZMcode:"",
  
        // 倒计时的数字
        count:60,
        maxCount:60,
        // 控制显示文案或显示倒计时
        isShowCount:false,
        // timer表示倒计时的定时器
        timer:null,
      }
    },
    components:{
      SlideVerify
    },
    // 原验证码方法
    // setup( ) {
    //   const msg = ref("");
    //   const block = ref();
    //   // 传参
    //   const onAgain = () => {
    //     msg.value = "检测到非人为操作的哦！ try again";
    //     // 刷新
    //     block.value?.refresh();
    //   }
    //   const onSuccess = (times) => {
    //     msg.value = `login success, 耗时${(times / 1000).toFixed(1)}s`;
    //   }
    //   const onFail = () => {
    //     msg.value = "验证不通过";
    //   }
    //   const onRefresh = () => {
    //     msg.value = "点击了刷新小图标";
    //   }
  //     return {
  //       block,
  //       // eslint-disable-next-line vue/no-dupe-keys
  //       msg,
  //       onAgain,
  //       onSuccess,
  //       onFail,
  //       onRefresh
  //     }
  // },
    methods:{
      ...mapMutations({
        // 控制登录窗口是否展示
        changeisshowlogin:"login/changeisshowlogin",
        // 登录状态
        changeIsLogined:"loginzt/changeIsLogined"
      }),
      ...mapActions({
        // 登录提示语是否显示
        asyncChangeIsShowToast:"logintoast/asyncChangeIsShowToast",
        // 用户信息
        asyncChangeUserInfo:"userinfo/asyncChangeUserInfo"
      }),
      
      // 拼图验证码方法
      // // 拼图成功
      onSuccess(times) {
        this.msg = `login success, 耗时${(times / 1000).toFixed(1)}s`;
      },
      // // 拼图失败
      onFail() {
        this.onRefresh(); // 重新刷新拼图
      },
      // // 拼图刷新
      onRefresh() {
        this.msg = "再试一次";
      },
      // 手机号通过正则表达式来检测
      validatePhoneNumber(value){
        let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        return reg.test(value)
      },
      // 检测手机号和滑块验证码 (11位数字,考虑运营商)
      verifyFn(){       
        // if(!正则对象.test(用户输入的信息)){
        // 1手机号验证
        if(!this.validatePhoneNumber(this.phoneNumber)){          
          this.asyncChangeIsShowToast({
            // 提示文案
            msg:"请输入正确的手机号",
            // 类名,判断提示语的颜色
            type: "warning"
          });
          return false
        }
        // 2 拼图滑块的验证
        if(this.msg=="再试一次" || this.msg=="向右滑动"){
            // 就说明用户没有拖拽验证或者验证失败了       
            this.asyncChangeIsShowToast({
              msg:"请移动滑块至正确位置",
              type: "warning"
            });
            return false
        }  
        return true
      },
      // 验证码倒计时的方法
      countDown(){                 
          this.timer = setInterval(()=>{
            this.count--;
            // 如果this.count为0了,就不能再减了,就关闭/清除定时器
            if(this.count==0){
              clearInterval(this.timer);
              this.count=this.maxCount;
              this.isShowCount=false;
            }
          },1000)
      },
      // 点击获取验证码按钮,执行这里的代码 
      async getYZMcode(){        
        // 手机号和拼图滑块的验证,验证不通过返回为空,下面代码不执行
        if(!this.verifyFn())return;
        // 验证通过就可以获取验证--向后端发起请求, 发送成功要变成倒计时
        let res = await SendYZMAPI({
          phone: this.phoneNumber
        });    
        // console.log(res);
        // if(res.code==0){
        //   // 倒计时: 显示"获取验证码"或者倒计时  倒数
        //   this.isShowCount=true;
        //   this.countDown()
        // }else{
        //   alert(res.message)  
        // }
        // 接口返回值为错误时,则返回值为空,不执行下方代码;true则不执行返回空
        if(!res)return;
        // 显示计时器
        this.isShowCount=true;
        // 定时器倒计时,显示计时器
        this.countDown();     
      },

      // 微信二维码
      weixinClick(){
        // 变为false，切换为微信二维码显示
        this.isShowForm=false;
        // 申请二维码
        let _this = this;
        new WxLogin({
            id: "weixin",
            appid: "wx67cfaf9e3ad31a0d",  // 这个appid要填死
            scope: "snsapi_login",
            // 扫码成功后重定向的接口
            redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
            // state填写编码后的url
            // state: encodeURIComponent(window.btoa("http://101.33.224.93" + _this.$route.path)),
            state: encodeURIComponent(window.btoa("http:/127.0.0.1:8080" + _this.$route.path)),
            // 调用样式文件
            href: "data:text/css;base64,Lyogd3hsb2dpbi5jc3MgKi8NCi5pbXBvd2VyQm94IC50aXRsZSwgLmltcG93ZXJCb3ggLmluZm97DQogIGRpc3BsYXk6IG5vbmU7DQp9DQoNCi8qIC5pbXBvd2VyQm94IC5xcmNvZGV7DQogIG1hcmdpbi10b3A6IDIwcHg7DQp9ICov",
        });
      }, 

      // 点击登录按钮执行这里的代码    
      async submitLogin(){       
        // 发送验证码时已验证过手机号和滑块
        // 手机验证码的验证,trim()表示删除左右两边的空格
        if(!this.YZMcode.trim()){
          this.asyncChangeIsShowToast({
              msg:"请输入手机验证码!",
              type: "warning"
            });
          return
        }
  
        // 登录要根据有没有uuid的情况,发送对应的请求
        // localStorage.setItem(key,value)：将value存储到key字段
        // localStorage.getItem(key):获取指定key本地存储的值
        let uuid = localStorage.getItem("uuid")
        let res = null;
        // 判断是否为微信登录
        if(uuid){
          // 绑定微信的登录的接口请求
          res = await BindPhoneAPI({
            verifyCode:this.YZMcode.trim(),
            phone:this.phoneNumber.trim(),
            uuid
          })
        }else{
          // 普通的手机号登录功能
          res = await PhoneLoginAPI({
            verifyCode:this.YZMcode.trim(),
            phone:this.phoneNumber.trim(),
            // verifyCode:456,
            // phone:15912345678
          });
    
        }
  
        // 登录失败提示语在响应拦截器中,失败后返回空,不执行下方代码
        if(!res)return;
        // 登录成功之后的逻辑
        // 1 同时关闭登录窗口
        this.changeisshowlogin(false)
        // 2 提示登录成功
        this.asyncChangeIsShowToast({
          msg:"登录成功!",
          type: "success"
        });       
        // 3 本地储存保存token值(永久保存),将接口返回值中的token保存在本地的token字段中
        localStorage.setItem("x-auth-token", res["x-auth-token"])
        // 4 登录状态的切换 (登录成功之后,要显示昵称,头像, 购物车按钮...)
        this.changeIsLogined(true);
        // console.log(res);
        // location.reload();
        // this.$route.go(0);
        this.$router.go(0);
  
        // 登录成功之后,删除uuid和地址栏上的code
        if(uuid){
          localStorage.removeItem("uuid");
          this.$router.push(this.$route.path)
        }
  
        // 登录成功,发送获取用户信息的请求
        this.asyncChangeUserInfo()
      }
    }
}
</script>
   
<style lang = "less" scoped>

.login-modal{
    // 将登录页面优先级提前
    z-index:2;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    // 遮罩层
    .mask{
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.5);
    }
    // 弹窗
    .login-box{
        width: 555px;
        height: 423px;
        background: url("../assets/img/login-box-bg.png");
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;   //有宽度时可以让这个登录弹窗居中
        margin: auto;
        // 关闭按钮
        .close{
            position: absolute;
            right: 60px;
            top:18px;
            cursor: pointer;
        }
        // 弹窗文本
        .title{
            display: flex;
            justify-content: center;
            padding-top:40px;
            font-size: 18px;
            color: #ccc;
            li{
              list-style: none;
              cursor: pointer;
            }
            .active{
                color:#333;               
            }
        }
        // 弹窗主体
        .body{
            width: 360px;
            margin: 25px auto 0;
            .form{
                .input-group{
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 20px;
                    input{
                        flex:1;
                        height: 48px;
                        text-indent: 10px;
                        border:1px solid #ccc;
                    }
                    .get-code{
                        width: 80px;
                        margin-left: 10px;
                        padding: 0 10px;
                        font-size: 16px;
                    }
                }
                .btn{
                    background-color: black;
                    height: 50px;
                    line-height: 50px;
                    color:#fff;
                    text-align: center;
                    font-size: 18px;
                    cursor: pointer;
                }
            }
        }
    }
}
#slideVerify{
    margin-top:-15px ;  
}
    /* 在一些插件和框架中,没有办法直接修改到插件（子组件）里面的样式,通过/deep/可以直接修改到 */
/deep/.slide-verify-slider{
    box-sizing: border-box;
}
/deep/.slide-box {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    canvas {
        position: absolute;
        left: 0;
        top: -120px;
        display: none;
        width: 100%;
        box-sizing: border-box;
    }
    .slide-verify-block{
        width: 85px;
        height: 136px;
    }
    .slide-verify-refresh-icon {
        top: -120px;
        display: none;
    }
    &:hover {
        canvas {
            display: block;
        }
        .slide-verify-refresh-icon {
            display: block;
        }
    }
}

#weixin{
display: flex;
justify-content: center;
margin-top: -10px;
}
</style>